<template>
  <view class="container">
    <custom-nav title="设置"></custom-nav>

    <view class="content">
      <list-card></list-card>

      <view class="s-item" @click="toLogout">
        <view class="s-left">
          <image :src="switchIcon" mode="widthFix" style="width: 48rpx; height: 48rpx" />
          <view class="s-title">申请注销账号</view>
        </view>
        <uni-icons type="right" color="#c1c1c1" size="16"></uni-icons>
      </view>

      <view class="s-bottom">
        <view class="s-left">
          <image :src="infoData.icon" mode="widthFix" style="width: 48rpx; height: 48rpx" />
          <view class="s-title">{{infoData.title}}</view>
        </view>
        <view class="s-switch">
          <view class="s-text">{{infoData.content}}</view>
          <image :src="infoData.imgUrl" mode="scaleToFill" class="s-img" @click="popupFn(infoData.id)" />
        </view>
      </view>
    </view>

  </view>
</template>

<script setup>
import ListCard from "./components/list-card.vue";
import switchIcon from "@/subPages/static/switch.svg";
import eyeIcon from "@/subPages/static/eye.svg";
import unEye from "@/subPages/static/un-eye.svg";
import checkedIcon from "@/subPages/static/checked.svg";
import unCheckedIcon from "@/subPages/static/un-checked.svg";
// 引入api
import useStore from "@/store";
import { getItem } from "@/utils/storage";
const { common } = useStore();

const checked = ref(false);

const infoData = computed(() => {
  if (!checked.value) {
    return {
      id: 1,
      icon: unEye,
      imgUrl: checkedIcon,
      title: "已暂停相亲",
      content:
        "点击取消暂停相亲后，会继续推荐自己和解锁、收藏别人，其他用户可以通过解锁您的联系方式正常联系您。",
    };
  } else {
    return {
      id: 2,
      icon: eyeIcon,
      imgUrl: unCheckedIcon,
      title: "申请暂停相亲",
      content:
        "暂停相亲后，您的资料将不会被别人看到。10天内只能开启一次，请谨慎使用。",
    };
  }
});

const popupFn = (id) => {
  let t = "";
  if (id == 2) {
    t = "apply";
  } else {
    t = "submit";
  }
  common.updatePopupOpen(true, t);
};

const confirmFn = () => {
  checked.value = !checked.value;
};

const toLogout = () => {
  uni.navigateTo({ url: "/subPages/settings/apply" });
};

const getArticleInfo = () => {
  const { status } = getItem("user_info") || {};
  checked.value = status == 1 ? false : true;
};
onLoad(() => {
  getArticleInfo();
});
provide("fatherFn", { confirmFn });
</script>

<style lang=scss scoped>
@import "@/styles/global.scss";
.content {
  padding: 20rpx;
}
.s-item {
  background: #fff;
  padding: 36rpx 30rpx;
  border-radius: 20rpx;
  margin: 20rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.s-left {
  display: flex;
  align-items: center;
}

.s-bottom {
  background: #fff;
  padding: 36rpx 30rpx;
  border-radius: 20rpx;
  margin: 20rpx 0;
}

.s-switch {
  display: flex;
  justify-content: space-between;
  padding-top: 16rpx;
}
.s-title {
  font-weight: 800;
  font-size: 32rpx;
  color: #ff5c55;
  margin-left: 16rpx;
}
.s-text {
  text-align: justify;
  font-weight: 500;
  font-size: 28rpx;
  color: #666;
  margin-right: 50rpx;
}

.s-img {
  width: 200rpx;
  height: 60rpx;
}
</style>